<template>
  <div class="img">
    <input v-show="false" type="file" id="img" @change="mychange">
    <label v-if="!imgUrl" for="img">
        <i class="iconfont icon-shurukuang-shangchuantupian"></i>
    </label>
    <img v-if="imgUrl" :src="imgUrl" alt="">
  </div>
</template>

<script>
    import '@/assets/iconfont/iconfont.css';
export default {
data(){
    return{
        imgUrl:'',
    }
},
methods:{
    mychange(e){
        let file = e.target.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = (e)=>{
            this.imgUrl = e.target.result;
        }
    },
    getImg(){
        return this.imgUrl;
    }
}
}

</script>

<style scoped>
    label{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        cursor: pointer;
        background: #fff;
        border: 1px dashed #bfbfbf;
        border-radius: 4px;
    }
    .iconfont{
        font-size: 24px;
    }
    img{
        width: 100%;
        height: 100%;
        object-fit: fill;
    }
    label:hover{
        background: #f5f6f7;
    }
</style>